{% load static %}
{% csrf_token %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>
<style>
    .box{
        position:relative;
        background-color: white; 
        width: 13cm;
        height: 9cm;
        left:400px;
        margin-top: 50px;
        /* border: 0.5px solid #000; */
        box-shadow:0 5px 20px rgba(0,0,0,0.5);
    }
    .ticket{
        position:absolute;
        /* left:500px; */
        margin: 18px 5px 5px 18px;
        width:12cm;
        height:8cm;
        background-color: rgb(222,172,185);
        /* left: 400px; */
        border: lightslategray;
        /* background-color: white; */
        /* box-shadow:0 5px 20px rgba(0,0,0,0.5); */
    }
    p{
        white-space:pre-wrap;/*保留空白字符*/
        overflow:hidden;
        text-overflow:ellipsis;
        display: inline;/*不换行*/
        font-size: 20px;
        text-indent:2cm;
        line-height:50px;
    }
</style>

<body>

    {% for tran in tran_list %}
        {% for tick in tick_list %}
            {% if tick.ticket_tran == tran %}
            <div class="box" >
                <div class="ticket" id="{{ tick.ticket_uuid }}">
                    <!-- <div style="position: relative;margin-top:20px;width:100%;height: 100%;"> -->
                    <div align="center">
                        <P style="font-size: 40px;">{{ tran.station_start }}</P>
                        <p style="font-size: 40px;">—></p> 
                        <p style="font-size: 40px;">{{ tran.station_arriv }}</p>
                        <br>
                    </div>    
                    <p>   </p>
                    <P>{{ tran.tran_date }}</P>
                    <P>{{ tran.tran_strt }}</P> 

                    <P>开  </P> 
                    <p>{{ tick.ticket_secd }}</p>
                    <br>
                    <p>   </p>
                    <p>￥</p>
                    <p>{{ tick.ticket_prce }}</p>
                    <p>元                       </p>
                    <p>{{ tick.ticket_seat }}</p>
                    <br><p>   </p>
                    <p style="font-size:medium">{{ tick.ticket_uuid }}</p>
                    <br><p>   </p>
                    <!-- <p>可水广告</p><br><p>                                   </p> -->
                    <br><p>                                   </p>
                    <button type="submit" style="width: 100px;" onclick=>改签</button>
                    <p>   </p>
                    <button type="submit" style="width: 100px;" onclick="refund(this)">退票</button>
                    <!-- </div> -->
                </div>
            </div>
            {% endif %}
        {% endfor %}   
    {% endfor %}
</body>
<script src="{% static 'tickets/JS/jquery-3.4.1.js' %}"></script>
<script src="{% static 'tickets/JS/Individual_order.js' %}"></script>
</html>